<!-- 地址弹框 -->

<template>
  <div>
    <!-- 地址新增 -->
    <el-dialog
      title="新增收货地址"
      :visible.sync="dialogVisible"
      width="35%"
      center
      :before-close="handleClose"
    >
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="收货人" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入收货人姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input
              v-model="ruleForm.mobile"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>

          <el-form-item label="收货地址">
            <el-select
              v-model="ruleForm.province"
              placeholder="请选择省份"
              style="width: 33%"
              @change="provinceForm"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="ruleForm.city"
              placeholder="请选择市区"
              style="width: 34%"
              @change="cityForm"
            >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="ruleForm.area"
              placeholder="请选择区县"
              style="width: 33%"
              @change="areaForm"
            >
              <el-option
                v-for="item in areaList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址" prop="desc">
            <el-input
              type="textarea"
              v-model="ruleForm.desc"
              :rows="4"
              placeholder="请输入详细地址信息"
            ></el-input>
          </el-form-item>
          <el-form-item label="设为默认">
            <el-switch
              v-model="valueDefault"
              active-color="#13ce66"
              inactive-color="#f1f3f4"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="danger"
          size="small"
          @click="ConfirmAddition('ruleForm', ruleForm)"
        >
          确认添加
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addgetAddress, addgetArea } from '@/api/address'

export default {
  name: 'DialogCombo',
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        name: '',
        desc: '',
        mobile: '',
        province: '', // 省
        city: '', // 市
        area: '' // 区
      },
      valId: 0,
      valueDefault: '1',
      cityList: [],
      areaList: [],
      provinceList: [],
      rules: {
        name: [
          { required: true, message: '请输入收货人信息', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        desc: [
          { required: true, message: '请填写详细地址信息', trigger: 'blur' }
        ],
        postalCode: [
          { required: true, message: '请填写邮政编码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getareaAdd(this.valId, 0)
  },
  methods: {
    ConfirmAddition(formName, valueItem) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let add_params = {
            name: valueItem.name,
            mobile: valueItem.mobile,
            address: valueItem.desc,
            province_id: valueItem.province,
            area_id: valueItem.area,
            city_id: valueItem.city,
            is_default: this.valueDefault
          }
          console.log(valueItem, add_params)
          let { data: data } = await addgetAddress(add_params)
          console.log(data)
          // 调用父组件地址函数
          this.$parent.getAddressList()
          this.$message.success({
            message: '添加成功',
            type: 'success',
            iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
            customClass: 'el-message--success' // 这个是由于上面设置了iconClass会覆盖掉type，所以需要再设置
          })
          this.dialogVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getareaAdd(valId, type) {
      addgetArea({ pid: valId }).then(({ data: data }) => {
        if (type == 0) {
          this.provinceList = data.data
        } else if (type == 1) {
          this.cityList = data.data
        } else if (type == 2) {
          this.areaList = data.data
        }
      })
    },
    provinceForm(value) {
      this.ruleForm.province = value
      this.getareaAdd(value, 1)
    },
    cityForm(value) {
      console.log(value)
      this.ruleForm.city = value
      this.getareaAdd(value, 2)
    },
    areaForm(value) {
      this.ruleForm.area = value
      console.log(value)
    },
    handleClose(done) {
      done()
    },
    open() {
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss"></style>
